<template>
	<el-main class="bg table_wrap comment">
	   <div class='div-form'>
		<el-form
		  ref="elFormRef"
		  :model="formInline"
		  label-width="90px"
		  :style="{ width: '100%' }"
		  label-position="left"
		>
		  <el-row :gutter="20">
			<el-col :span="5">
			  <el-form-item label="昵称">
				  <el-input v-model="formInline.nickname"></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="5">
			  <el-form-item label="内容">
				  <el-input v-model="formInline.content"></el-input>
			  </el-form-item>
			</el-col>
			
		  </el-row>
		</el-form>
	  </div>
	  <baseTable  :tableColumns="columns"  requestApi='/api/comment/get_list' 
	   :isShowSelect="true" 
		v-model:isRefresh="isRefresh" 
		:otherParams="formInline"
	   @handleSelectionChange="handleSelectionChange"
	   @handleCurrentChangeNew="handleCurrentChangeNew"
	   >
	   <!-- 头部按钮 -->
		  <template #baseHeadFunt>
			  <el-button type="primary" @click="onSubmit">查询</el-button>
			  <el-button @click="onReset(true)">重置</el-button>
			<el-button type="danger" v-if="user_group == '管理员' || $check_action('/comment/table','del')" class="search_btn_del"  @click="delInfo()">删除</el-button>
		  </template>
	  <!-- 操作 -->
		<template #baseTableFunt="{ scope }">
			  <el-button type="primary"   size="small" @click="router.push('./view?' + field + '=' + scope.row[field])">详情</el-button>
			  <el-button type="primary"  size="small" @click="checkFun(scope.row[field])" v-if="!scope.row['reply_to_id']">查看被回复</el-button>
		  </template>
		  <!-- 特殊内容处理 -->
		  <template #tableContent="{ scope, column }">
		  <span v-if="column.prop === 'avatar'">
			<el-image
			:preview-teleported="true"
			style="width: 60px; height: 60px"
			:src="$fullUrl($banseUrl,scope.row.avatar)"
			:preview-src-list="[$fullUrl( $banseUrl,scope.row.avatar)]"
			:initial-index="0"
			fit="cover"
			>
			 </el-image>
		  </span> 
		  <span v-if="column.prop === 'user_id'">{{getName(scope.row.user_id)}}</span> 
		  <span v-if="column.prop === 'create_time'">{{ formatDate(scope.row.create_time) }}</span> 
        <span v-if="column.prop === 'update_time'">{{ formatDate(scope.row.update_time) }}</span> 
		</template>
		<template #tableContent2="{ scope, column }">
		  <span v-if="column.prop === 'avatar'">
			<el-image
			:preview-teleported="true"
			style="width: 60px; height: 60px;display: none;"
			:src="$fullUrl($banseUrl,scope.avatar)"
			:preview-src-list="[$fullUrl( $banseUrl,scope.avatar)]"
			:initial-index="0"
			fit="cover"
			>
			 </el-image>
		  </span> 
		  <span v-if="column.prop === 'user_id'"> {{ column.label }}：{{getName(scope.user_id)}}</span> 
		  <span v-if="column.prop === 'create_time'"> {{ column.label }}：{{ formatDate(scope.create_time) }}</span> 
		<span v-if="column.prop === 'update_time'"> {{ column.label }}：{{ formatDate(scope.update_time) }}</span> 
		</template>
	  </baseTable>
	  </el-main>
  </template>
  <script setup>
  import { useRouter,useRoute} from "vue-router";
  let router = useRouter();
  let route = useRoute();
  import {
	$getUrlParams,
	$get_auth,
	func,
	paramsFun,
	$fullUrl,
	formatDate,
	$banseUrl,
	$check_action,
  } from "@/utils/utils.js";
  import { $post, $get } from "@/api/Api.js";
  import {Picture} from "@element-plus/icons-vue";
  import { ElMessage} from "element-plus";
  import { ref,toRefs,computed,onMounted} from "vue"
  import storageHelper from '@/libs/StorageHelper'
  let user_group = storageHelper.getUserInfo().user_group;
  let source_table =route.query.source_table;
  let source_field =route.query.source_field;
  let source_id =route.query.source_id;
  // 列名
  const columns =[
  { "prop": "nickname", "label": "昵称" },
  { "prop": "avatar", "label": "头像" },
  { "prop": "user_id", "label": "评论人" },
  { "prop": "create_time", "label": "创建时间" },
  { "prop": "update_time", "label": "更新时间" },
  ]
  // 字段ID
  let field=ref("comment_id")
  // 是否刷新table
  let isRefresh = ref(false)
  let list_comment_type= ref([])
  //批量勾选数据框
  let selectList = ref([])
  let reply_to_id = ref('')
  //点击数据
  let currentRowTableProduct = ref({})
  //表格勾选回调
  let handleSelectionChange = (val) => {
	selectList.value = val.map((item) => {
	  return item.comment_id
	})
  }
  // 查看被回复
  let checkFun= (id) => {
	onReset();
	formInline.value['reply_to_id'] = id;
	isRefresh.value = true
  }
  //点击当前行
  let handleCurrentChangeNew = (val) => {
	currentRowTableProduct.value = val
  }
  // 头部搜索// 搜
  let formInline = ref({
	nickname: '',
	content: '',
	source_table: source_table,
	source_field: source_field,
	source_id: source_id,
  })
  // 搜索
  let onSubmit = () => {
	isRefresh.value = true
  }
  // 重置
  let onReset = (refresh) => {
	formInline.value = {
		nickname: '',
		content: '',
		source_table: source_table,
		source_field: source_field,
		source_id: source_id,
	}
	isRefresh.value = refresh
  }
  // 批量删除删除
  let delInfo = () => {
	ElMessageBox.confirm(
	  '此操作将永久删除该文件, 是否继续?',
	  '提示',
	  {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	  }
	)
	  .then(() => {
		selectList.value.map((item) => {
		  delFun(item)
		})
	  })
	  .catch(() => {
		ElMessage({
		  type: 'info',
		  message: '取消操作',
		})
	  })
  }
   
  // 调用删除方法
  let delFun= (id) => {
	$get(url_del.value+"comment_id="+id).then((json)=> {
	  if (json.result) {
		ElMessage.success('删除成功');
	  } else if (json.error) {
		ElMessage.error(json.error.message);
	  }
	  isRefresh.value = true
	});
  
  }
  let list_user=ref([]) 
  // 获取用户列表
let	 get_list_user=async() =>{
  let json = await $get("/api/user/get_list");
  if(json.result){
    list_user.value = json.result.list;
  }
  else if(json.error){
    console.error(json.error);
  }
}
let getName=(id)=>{
	let name=''
	list_user.value.map((item)=>{
		if(item.user_id==id){
			name =item.nickname
		
		}
   })
   return  name
}
onMounted(()=>{
get_list_user()

})
</script>
<style lang="less" scoped>
.div-form{
padding:10px;
}
</style>